<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/my_jquery_functions.js"></script>
	<title>Document</title>
</head>
<body>
    <h2>This is a heading</h2>
	<p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button class="text">Click me</button>
    <h3>中国办事处</h3>
    <button id="show" type="button">显示</button>
    <button class="hide" type="button">隐藏</button>
    <p class="ex">联系人：张先生<br /> 北三环中路 100 号<br />北京</p>
    <h3>美国办事处</h3>
    <div class="ex">
        <button class="hd" type="button">隐藏</button>
        <p>联系人：David<br /> 第五大街 200 号<br />纽约</p>
    </div>
    <p>演示带有不同参数的 fadeOut() 方法。</p>
    <button class="fadeout">点击这里，使三个矩形淡出</button>
    <br />
    <br />
    <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    <br />
    <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
    <br />
    <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    <p>演示带有不同参数的 fadeTo() 方法。</p>
    <button class="fadeto">点击这里，使三个矩形淡出</button>
    <br />
    <br />
    <div id="div4" style="width:80px;height:80px;display:none;background-color:#3447ec;"></div>
    <br />
    <div id="div5" style="width:80px;height:80px;display:none;background-color:green;"></div>
    <br />
    <div id="div6" style="width:80px;height:80px;display:none;background-color:blue;"></div>
    <button class="animate-1">开始动画</button>
    <p>默认情况下，所有HTML元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
    <div class="div7"style="background:#98bf21;height:100px;width:100px;position:relative;"></div>
    <button class="animate-2">开始动画</button>
    <button id="stop">停止滑动</button>
    <p>默认情况下，所有HTML元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
   <div class="div8" style="background:#98bf21;height:100px;width:200px;position:relative;">HELLO
   </div>
   <button class="callback"type="button">Hide</button>
   <p class="callback-1">This is a paragraph with little content.</p>
   <p class="test1">这是<b>粗体</b>文本。</p>
   <button id="btn1">显示旧/新文本</button>
   <p id="test2">这是另一段<b>粗体</b>文本。</p>  
   <button id="btn2">显示旧/新 HTML</button>
   <p><a href="http://www.w3school.com.cn" id="w3s">w3school.com.cn</a></p>
   <button class="btn3">改变 href 值</button>
   <p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
   <div id="div9" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
   <br />
   <button class="btn4">显示 div 的尺寸</button>
   <p>width() - 返回元素的宽度。</p>
   <p>height() - 返回元素的高度。</p>
   <br />
   <div class="ancestors">
        <div style="width:500px;">div (曾祖父)
            <ul>ul (祖父)  
                <li>li (直接父)
                    <span>span</span>
                </li>
            </ul>   
        </div>
    </div>
</body>
